<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>个人信息</caption>
    <tr>
        <td>照片:</td>
        <td id="head_td"></td>
    </tr>
    <tr>
        <td>名字:</td>
        <td id="name_td"></td>
    </tr>
    <tr>
        <td>年龄:</td>
        <td id="age_td"></td>
    </tr>
    <tr>
        <td>好友:</td>
        <td id="friend_td"></td>
    </tr>
    <tr>
        <td>爱好:</td>
        <td id="hobby_td"></td>
    </tr>
</table>
<input type="button" value="请求数据" onclick="f()">
<script>
    function f() {
        //模拟数据是从服务器请求回来的
        let person = {name:"蕉太狼",age:18,url:"b.jpg",friends:["灰太狼","懒洋洋","软绵绵"],hobby:"吃香蕉"}
        //1.创建图片标签 显示person对象里面url对应的图片 把图片标签添加到head_td里面
        //2.修改name_td的内容为person里面的名字
        //3.修改age_td的内容为person里面的年龄
        //4.创建ul  遍历好友数据,遍历的过程中创建li标签,把好友名字装到li里面
        //5.把li装到ul  最后把ul装进friend_td里面
        let headTd = document.querySelector("#head_td")
        let nameTd = document.querySelector("#name_td")
        let ageTd = document.querySelector("#age_td")
        let friendTd = document.querySelector("#friend_td")
        let hobby = document.querySelector("#hobby_td")
        //1.
        let img = document.createElement("img");
        img.src = person.url;
        headTd.append(img);
        //2.
        nameTd.innerHTML = person.name;
        //3.
        ageTd.innerHTML = person.age;
        hobby.innerHTML = person.hobby;
        //4.-5.
        let ul = document.createElement("ul");
        let arr = person.friends;
        for (const friend of arr) {
            let li = document.createElement("li");
            li.innerHTML = friend;
            ul.append(li);
        }
        friendTd.append(ul);
    }
</script>
</body>
</html>